<template>
  <n-upload
      style="width: max-content"
      :action="url"
      :name="name"
      :headers="{
        Authorization:token,
      }"
      :data="{
      'parentId': parentId,
      'creatorId': userInfo.id,
      'pathName': pathName+'/',
    }"
      :show-file-list="false"
      multiple
      @finish="handleFinish">
    <n-button class="round-xl" type="info" size="large">
      <TextIcon class="hidden md:block" icon="mingcute:upload-line" :icon-size="25">上传文件</TextIcon>
      <TextIcon class="md:hidden" icon="mingcute:upload-line" :icon-size="25" tip="上传文件"></TextIcon>
    </n-button>
  </n-upload>

</template>

<script setup lang="ts">

import TextIcon from "@/components/text/TextIcon.vue";
import {UploadFileInfo} from "naive-ui";
import {uploadFile} from '~/settings'
import {useFileStore} from "@/store/file";
import {storeToRefs} from "pinia";
import {useUserStore} from "@/store/user";

const userStore = useUserStore()
const fileStore = useFileStore()
const {parentId, pathName} = storeToRefs(fileStore)
const {userInfo, token} = storeToRefs(userStore)

const url = uploadFile.url
const name = uploadFile.name

const emits = defineEmits(['handleUploadSuccess'])


const handleFinish = ({file, event}: {
  file: UploadFileInfo
  event?: ProgressEvent
}) => {
  const res = JSON.parse((event?.target as XMLHttpRequest).response)
  if (res.code === 0) {
    window.$message.success('上传成功')
    emits('handleUploadSuccess')
  }
  return file
}


</script>

<style scoped>

</style>